import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
import TabContent from 'rc-tabs/lib/TabContent';
import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
import 'rc-tabs/assets/index.css';

export default class Tab extends React.Component {
    render() {
        const { items, setting, onChange, tabId } = this.props;
        const { tabWidthType, tabWidth } = setting;

        let tabWithCss = {};
        if (tabWidthType == 0) {
            tabWithCss = { width: `${tabWidth}px`, 'white-space': 'nowrap', overflow: 'hidden', 'text-overflow': 'ellipsis' };
        } else if (tabWidthType == 1) {
            tabWithCss = { width: 'auto', 'padding-left': '10px', 'padding-right': '10px', 'margin-right': '10px' };
        }
        return (
            <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@iyv6a3`}
              activeKey={tabId}
              renderTabBar={() => <ScrollableInkTabBar ecId={`${this && this.props && this.props.ecId || ''}_ScrollableInkTabBar@i3hk15`} />}
              renderTabContent={() => <TabContent ecId={`${this && this.props && this.props.ecId || ''}_TabContent@fp3ebi`} />}
              className="tabcontainer tab2"
              onChange={(actionKey) => { onChange(actionKey); }}
            >
                {
                    items.map(item => (
                            <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@pkdk0c@${item.id}`}
                              tab={
                                    <div title={item.setting.title + (item.count != undefined && item.count != 0 ? (`(${item.count})`) : '')} style={tabWithCss} className={`tab ${tabId == item.id ? 'tab2selected' : 'tab2unselected'}`}>
                                        {item.setting.title}
                                        {
                                            item.count != undefined && item.count != 0 ? (
                                                `(${item.count})`
                                            ) : ''
                                        }
                                        {
                                            item.countIcon != undefined && item.countIcon != '' ? (
                                                <img src={item.countIcon} />
                                            ) : null
                                        }
                                        {/* { */}
                                            {/* item.count != '0' ? ( */}
                                                {/* <div className="tab-content-count">{item.count}</div> */}
                                            {/* ) : null */}
                                        {/* } */}
                                        <div />
                                    </div>
                                }
                              key={item.id}
                            />
                        ))
                }
            </Tabs>
        );
    }
}
